<template>
  <view class="components-form">
    
    <!-- 顶部自定义导航 -->
    <tn-nav-bar fixed>货物贷款额度评估</tn-nav-bar>
    
    <!-- 页面内容 -->
    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
      
      <dynamic-demo-template ref="demoTemplate" :full="true" :fullWindowsScroll="true" @click="click">
        <tn-form :model="model" ref="form" errorType="message" labelPosition="top" labelWidth="140" labelAlign="left">

		  <tn-form-item label="货物" prop="goods"  :required="true" labelPosition="top" labelAlign="left">
		    <tn-input v-model="model.goods" type="text" placeholder="请选择货物" :border="false" :selectOpen="selectShow" @click="selectShow = true"></tn-input>
		  </tn-form-item>

        </tn-form>
        <tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" width="100%" @click="submit">提交</tn-button>
      </dynamic-demo-template>
      
      <!-- 商品select -->
      <tn-select
        v-model="selectShow"
        mode="single"
        :list="selectList"
        @confirm="goodsSelectConfirm"
      ></tn-select>
      
    </view>
    
  </view>
</template>

<script>
  import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
  import {instoreGoods,applyAmount} from '@/api/loan.js'

  export default {
    name: 'componentsForm',
    components: {dynamicDemoTemplate},
    data() {
      return {
        selectShow: false,
        selectList: [
        ],
        model: {
		  id:null,
		  goods:"",
        },
        rules: {
          goods: [
            {
              required: true,
              message: '请选择货物',
              trigger: ['change','blur'],
            },
		  ],
        }
      }
    },
	mounted() {
		this.$refs.form.setRules(this.rules)
		this.getGoodsList()
	},
	created() {
		
	},
    onReady() {
      this.$refs.form.setRules(this.rules)
    },
    methods: {
      click(event) {
        this[event.methods] && this[event.methods](event)
      },
	  getGoodsList(){
		  instoreGoods().then(res=>{
			  res.forEach(it=>{
				 this.selectList.push({label:it.pname+"-"+it.pnum,value:it.id})
			  })
		  }).catch(err=>{
			  this.selectList=[]
		  })
	  },
      // 表单提交
      submit() {
        this.$refs.form.validate(valid => {
          if (valid) {
            // 验证通过
			applyAmount({goodsId:this.model.id}).then(res=>{
				 this.$t.message.toast('提交成功')
				 uni.navigateTo({
					url: '/pages/index?index=3',
				 });
			}).catch(err=>{
				console.log(err)
				this.$t.message.toast(err.data.message)	 			 
			})
          } else {
            // 验证失败
			this.$t.message.toast('请填写表单')
          }
        })
      },
      // 点击商品单位选择器
      goodsSelectConfirm(event) {
		console.log(event)
        this.model.goods = `${event[0]['label']}`
		this.model.id = `${event[0]['value']}`
      },
    }
  }
</script>

<style lang="scss" scoped>
  
  .agreement {
    display: flex;
    align-items: center;
    margin: 40rpx 0;
    
    &-text {
      padding-left: 8rpx;
      color: $tn-font-sub-color;
    }
  }
  
</style>
